<template>
	<view @click="jumpPage(`/pages/home/detail?id=${item.id}&type=${type}`)"
		class="card flex-row justify-between align-center item">
		<view class="tag">
			{{item.tag_name}}
		</view>
		<view class="img-box">
			<image :src="item.staff_image" style="width: 250rpx;height: 410rpx;border-top-left-radius: 30rpx;border-bottom-left-radius: 30rpx;" mode="aspectFill"></image>
		</view>
		<view class="img-box1"></view>
		<view class="flex-column justify-between" style="padding:30rpx;box-sizing: border-box;width:65%;height: 100%;">
			<view class="sub-size fw-700">
				{{item.name}}
			</view>
			<view class="flex-row justify-between align-center">
				<view class="small-size flex-row">
					<view class="gray-color">
						身材：
					</view>
					<view class="ellipsis" style="width: 120rpx;">
						{{item.staff_figure}}
					</view>
				</view>
				<view class="small-size flex-row">
					<view class="gray-color">
						相似度：
					</view>
					<view class="">
						<u-icon name="star-fill" color="#FF9A68" :label="item.value" labelColor="#FF9A68"></u-icon>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="small-size">
					<view class="gray-color">
						服务项目
					</view>
					<view class="mt-10 ellipsis">
						{{item.staff_service_text ? item.staff_service_text : ''}}
					</view>
					<view class="hot-tag flex-row align-center mt-10 ">
						<image :src="hot" style="width: 30rpx;height: 30rpx;" mode="widthFix"></image>
						<view class="ellipsis" style="width: 330rpx;">
							{{item.staff_service1_text ? item.staff_service1_text : ''}}
						</view>
					</view>
				</view>
			</view>
			<view class="small-size flex-row align-center justify-between">
				<view class="">
					<view class="price-color flex-row align-end">
						￥<view class="big-size">
							{{item.price}}
						</view>
					</view>
					<view class="flex-row">
						<view class="small-size">
							营业时间：
						</view>
						<view class="">
							{{item.starttime}}~{{item.endtime}}
						</view>
					</view>
				</view>
				<slot name="btn"></slot>
			</view>
		</view>
		<login ref="login" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		props: {
			item: Object,
			type:Number
		},
		data() {
			return {
				version: uni.$u.config.v
			}
		},
		methods: {
			jumpToWx() {
				// #ifdef MP-WEIXIN
				uni.navigateToMiniProgram({
					appId: 'wx3be833c4a263e0c2'
				})
				// #endif
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item {
		// height: 410rpx;
		position: relative;
		box-sizing: border-box;
		position: relative;
	}

	.img-box1 {
		width: 40%;
	}

	.img-box {
		// border: 1rpx solid #E6A07C;
		width: 40%;
		// height: 420rpx;
		border-radius: 30rpx;
		// padding: 30rpx;
		box-sizing: border-box;
		// position: absolute;
		// top: -10rpx;
		// left: 0;
	}

	.box {
		background-color: #E7E7E7;
		border-radius: 30rpx;
		padding: 20rpx;
		margin: 10rpx 0;
	}

	.tag {
		padding: 10rpx 15rpx;
		border-top-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background-color: $color;
		color: #fff;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 0;
		font-size: 24rpx;
		z-index: 9;
	}

	.hot-tag {
		background: linear-gradient(180deg, #FFDDCA 50%, #FFDDCA 100%);
		padding: 5rpx;
		border-radius: 10rpx;
		color: #7D4D27;
	}
</style>